<template>
  <div class="feedback">
    <page-header title="问题反馈" subtitle="您的意见是我们改进的动力"></page-header>
    
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="feedback-form-card">
          <template #header>
            <div class="card-header">
              <span>提交反馈</span>
            </div>
          </template>
          
          <el-form :model="feedbackForm" :rules="rules" ref="feedbackFormRef" label-width="100px">
            <el-form-item label="反馈类型" prop="type">
              <el-select v-model="feedbackForm.type" placeholder="请选择反馈类型" style="width: 100%;">
                <el-option label="就医环境" value="environment"></el-option>
                <el-option label="医疗服务" value="service"></el-option>
                <el-option label="医护态度" value="attitude"></el-option>
                <el-option label="收费问题" value="fee"></el-option>
                <el-option label="系统建议" value="system"></el-option>
                <el-option label="其他" value="other"></el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item label="反馈标题" prop="title">
              <el-input v-model="feedbackForm.title" placeholder="请输入反馈标题"></el-input>
            </el-form-item>
            
            <el-form-item label="反馈内容" prop="content">
              <el-input 
                v-model="feedbackForm.content" 
                type="textarea" 
                :rows="6" 
                placeholder="请详细描述您遇到的问题或建议"
              ></el-input>
            </el-form-item>
            
            <el-form-item label="上传图片">
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :limit="3"
                :on-change="handleImageChange"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
              <div class="upload-tip">
                <el-icon><InfoFilled /></el-icon>
                <span>最多上传3张图片，每张不超过2MB</span>
              </div>
            </el-form-item>
            
            <el-form-item label="联系方式" prop="contact">
              <el-input v-model="feedbackForm.contact" placeholder="请留下您的联系方式，以便我们回复"></el-input>
            </el-form-item>
            
            <el-form-item label="是否匿名">
              <el-switch v-model="feedbackForm.isAnonymous"></el-switch>
              <span class="anonymous-tip">匿名提交将不会显示您的个人信息</span>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="submitFeedback">提交反馈</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="feedback-info-card">
          <template #header>
            <div class="card-header">
              <span>反馈须知</span>
            </div>
          </template>
          
          <div class="info-content">
            <h4>反馈处理流程</h4>
            <el-steps direction="vertical" :active="4" finish-status="success">
              <el-step title="提交反馈" description="填写反馈表单并提交"></el-step>
              <el-step title="受理反馈" description="工作人员将在1个工作日内受理"></el-step>
              <el-step title="调查处理" description="相关部门进行调查和处理"></el-step>
              <el-step title="反馈结果" description="处理结果将通过系统或联系方式通知"></el-step>
            </el-steps>
            
            <el-divider></el-divider>
            
            <h4>温馨提示</h4>
            <ul class="tips-list">
              <li>请如实填写反馈信息，以便我们更好地解决问题</li>
              <li>对于紧急事件，请直接联系医院客服电话：0123-4567890</li>
              <li>您的反馈将在3-5个工作日内得到回复</li>
              <li>感谢您对医院工作的支持和理解</li>
            </ul>
          </div>
        </el-card>
        
        <el-card class="my-feedback-card">
          <template #header>
            <div class="card-header">
              <span>我的反馈</span>
              <el-button type="text" @click="loadMyFeedback">刷新</el-button>
            </div>
          </template>
          
          <div v-if="myFeedbacks.length > 0">
            <el-collapse>
              <el-collapse-item v-for="feedback in myFeedbacks" :key="feedback.id" :name="feedback.id">
                <template #title>
                  <div class="feedback-item-title">
                    <span>{{ feedback.title }}</span>
                    <status-tag :status="feedback.status"></status-tag>
                  </div>
                </template>
                
                <div class="feedback-detail">
                  <p class="feedback-time">提交时间：{{ feedback.createTime }}</p>
                  <p class="feedback-type">类型：{{ getFeedbackTypeName(feedback.type) }}</p>
                  <p class="feedback-content">{{ feedback.content }}</p>
                  
                  <div v-if="feedback.reply" class="feedback-reply">
                    <p class="reply-title">回复：</p>
                    <p class="reply-content">{{ feedback.reply }}</p>
                    <p class="reply-time">回复时间：{{ feedback.replyTime }}</p>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
          
          <empty-state v-else description="暂无反馈记录"></empty-state>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import PageHeader from '@/components/PageHeader.vue'
import EmptyState from '@/components/EmptyState.vue'
import StatusTag from '@/components/StatusTag.vue'
import { Plus, InfoFilled } from '@element-plus/icons-vue'

const feedbackFormRef = ref(null)

const feedbackForm = reactive({
  type: '',
  title: '',
  content: '',
  images: [],
  contact: '',
  isAnonymous: false
})

const rules = {
  type: [{ required: true, message: '请选择反馈类型', trigger: 'change' }],
  title: [{ required: true, message: '请输入反馈标题', trigger: 'blur' }],
  content: [{ required: true, message: '请输入反馈内容', trigger: 'blur' }],
  contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
}

const myFeedbacks = reactive([
  {
    id: 1,
    title: '关于预约挂号系统的建议',
    content: '建议预约挂号系统增加短信提醒功能，方便患者记住预约时间。',
    type: 'system',
    status: '已回复',
    createTime: '2023-04-15 10:23',
    reply: '感谢您的建议，我们已将此功能列入系统升级计划中，预计下个月完成升级。',
    replyTime: '2023-04-16 14:30'
  },
  {
    id: 2,
    title: '门诊大厅指引不明确',
    content: '门诊大厅的指引牌不够明确，找科室比较困难，建议增加更清晰的指引。',
    type: 'environment',
    status: '处理中',
    createTime: '2023-05-02 15:45',
    reply: '',
    replyTime: ''
  }
])

const handleImageChange = (file) => {
  // 处理图片上传
  console.log('图片上传:', file)
}

const submitFeedback = () => {
  feedbackFormRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('反馈提交成功，感谢您的宝贵意见！')
      // 这里可以添加提交反馈的逻辑
      resetForm()
    } else {
      return false
    }
  })
}

const resetForm = () => {
  feedbackFormRef.value.resetFields()
}

const loadMyFeedback = () => {
  // 这里可以添加加载用户反馈的逻辑
  ElMessage.success('反馈记录已刷新')
}

const getFeedbackTypeName = (type) => {
  const typeMap = {
    'environment': '就医环境',
    'service': '医疗服务',
    'attitude': '医护态度',
    'fee': '收费问题',
    'system': '系统建议',
    'other': '其他'
  }
  return typeMap[type] || '未知'
}
</script>

<style scoped>
.feedback {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feedback-form-card, .feedback-info-card, .my-feedback-card {
  margin-bottom: 20px;
}

.upload-tip {
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.anonymous-tip {
  margin-left: 10px;
  color: #909399;
  font-size: 14px;
}

.info-content h4 {
  font-size: 16px;
  margin-bottom: 15px;
}

.tips-list {
  padding-left: 20px;
  line-height: 1.8;
  color: #606266;
}

.feedback-item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.feedback-detail {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.feedback-time, .feedback-type {
  color: #909399;
  font-size: 14px;
  margin-bottom: 5px;
}

.feedback-content {
  margin: 10px 0;
}

.feedback-reply {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px dashed #dcdfe6;
}

.reply-title {
  font-weight: bold;
  color: #409eff;
}

.reply-content {
  margin: 5px 0;
}

.reply-time {
  color: #909399;
  font-size: 14px;
}
</style> 